<#include "./cc-virtual-panel.ftl"/>
<#include "./cc-virtual-panel-group.ftl"/>
<script type="text/x-template" id="cc-virtual-tab">
    <div :class="{
            'cc-virtual-tab': true,
            'collapse-all': isDragging,
        }"
         :style="{width: width + 'px'}"
    >
        <template v-for="(panelItem, index) in panels">
            <div
                    :class="{
                    'tab-placeholder': true,
                    'tab-placeholder--normal': true,
                    'collapse': panelItem.isCollapse,
                    'is-dragable': !readOnly,
                    'tab-placeholder--dragging': false
                }"
                    v-shadow-drag="{type: panelItem.id, index: index}"
                    @shadow-drag-start="handleDragStart($event, index)"
                    @shadow-drag-end="handleDragEnd"
            >
                <div class="panel-group-title">
                    <i v-if="!panelItem.isCollapse" class="el-icon-arrow-up" @click="handleCollapse(true, index)"></i>
                    <i v-else class="el-icon-arrow-down" @click="handleCollapse(false, index)"></i>
                    <template> {{ panelItem.id }}</template>
                    <el-radio-group
                            class="tab-placeholder__idType"
                            v-model="panelItem.idType"
                            draggable="true"
                            @dragstart.native="disableDrag"
                            @change="$emit('change-id-type', index, $event)"
                    >
                        <el-radio v-for="(item, key) in INPUT_AUTO_DICT" :key="key" :label="item.value">{{
                            item.label
                            }}
                        </el-radio>
                    </el-radio-group>
                    <i v-if="!readOnly" title="删除组" @click="handleRemovePanel(index)"
                       class="tab-placeholder__group-remove el-icon-close"></i>
                </div>
                <div class="panel-group-content">
                    <div class="tab-placeholder__normal-panel">
                        <cc-var
                                :class="{
                                'tab-placeholder__panel-wrapper': true,
                                'panel-duplicate': panelItem.isDuplicate
                            }"
                                :panel="getPanelInfo(panelItem.id)"
                        >
                            <template scope="{panel: panel}">
                                <div class="tab-plcacholder-info">
                                    <div
                                            class="tab-placeholder-info__link"
                                            @click="handleOpenPanel(panel)"
                                    >
                                        {{ panel.id }}
                                    </div>
                                    <div
                                            class="tab-placeholder-info__link"
                                            @click="handleOpenPanel(panel)"
                                    >
                                        {{ panel.label }}
                                    </div>
                                </div>
                                <div class="tab-placeholder__panel">
                                    <cc-virtual-panel-group
                                            :panel="panelData[panelItem.id]"
                                            :active="panelItem.activeIndex"
                                            @activate="handleActivate(panelItem, $event)"


                                    />
                                </div>
                            </template>
                        </cc-var>
                    </div>
                </div>

        </template>
    </div>
</script>

<script>
    Vue.component('cc-virtual-tab', {
        template: '#cc-virtual-tab',
        data() {
            return {
                isDragging: false,
                draggingIndex: undefined,
                INPUT_AUTO_DICT: [
                    {
                        label: 'INPUT',
                        value: 'INPUT'
                    },
                    {
                        label: 'AUTO',
                        value: 'AUTO'
                    }
                ],
            }
        },
        props: ['panels', 'panelData', 'width', 'readOnly'],
        methods: {
            disableDrag(event) {
                event.stopPropagation()
                event.preventDefault()
            },
            getPanelInfo(id) {
                const panelData = this.panelData;
                const panel = this.getValueByKey(id, panelData);
                const result = {

                    id: panel.id,
                    label: panel.label,

                }
                return result
            },
            getValueByKey(id, obj) {
                for (var key in obj) {
                    if (key === id) {
                        return obj[key];
                    }
                }
                return '';
            },
            handleActivate(panel, index) {
                this.$set(panel, 'activeIndex', +index)
            },
            handleDragStart(event, index) {
                if (this.readOnly) {
                    event.preventDefault()
                    event.stopPropagation()
                    return
                }
                this.$emit('drag-start')
                setTimeout(function () {
                    this.isDragging = true
                    this.draggingIndex = index
                }.bind(this), 0)
            },
            handleDragEnd() {
                this.isDragging = false
                this.draggingIndex = undefined
                this.$emit('drag-end')
            },
            handleCollapse(isCollapse, index) {
                this.$emit(isCollapse ? 'collapse' : 'uncollapse', index)
            },
            handleDragEnter(e) {
                e.currentTarget.classList.add('active')
            },
            handleDragLeave(e) {
                e.currentTarget.classList.remove('active')
            },
            handleAddPanel(index) {
                this.$emit('add-panel', {
                    index: index
                })
            },
            handleDrop(dragEvent, dropInfo) {
                //this.isDragging = false
                this.handleDragLeave(dragEvent)
                const dragInfo = JSON.parse(dragEvent.dataTransfer.getData('text/plain'))
                // dragEnd 事件还没触发，dom变太早的话，造成 dragEnd 事件被解绑导致触发不了
                setTimeout(function () {
                    if (dragInfo.id) {
                        // 插入板块
                        this.$emit('insert-panel', dragInfo, dropInfo)
                    } else {
                        this.$emit('reorder-panel', dragInfo, dropInfo)
                    }
                }.bind(this), 20)
            },
            handleDragOver(e) {
                e.preventDefault()
            },
            handleOpenPanel(panel) {
                this.$emit('open-panel', panel)
            },
            handleInsertPanel() {

            },
            handleRemovePanel(index, crowdIndex) {
                this.$emit('remove-panel', index, crowdIndex)
            },
            handleShowAllPanels(index) {
                this.$emit('show-all-panel', index)
            }
        },
        created() {
        }
    })
</script>
<style>
    .cc-virtual-tab {
    }

    .cc-virtual-tab .tab-placeholder {
        margin: 3px 0;
        line-height: 1;
        position: relative;
        border: 1px solid #ccc;
    }

    .cc-virtual-tab .is-dragable {
        cursor: move;
    }

    .cc-virtual-tab .tab-placeholder__index {
        margin-right: 40px;
        width: 120px;
        float: right;
        line-height: 20px;
        top: 5px;
    }

    .cc-virtual-tab .tab-placeholder__idType {
        margin-left: 40px;
        top: 5px;
    }

    .cc-virtual-tab .tab-placeholder__group-remove {
        position: absolute;
        top: 8px;
        right: 10px;
        color: #ccc;
        cursor: pointer;
        background: #fff;
        padding: 5px;
    }

    .cc-virtual-tab .panel-group-content {
        padding: 5px 10px;
        overflow: hidden;
    }

    .cc-virtual-tab .tab-placeholder.collapse .panel-group-content {
        display: none;
    }

    .cc-virtual-tab .tab-placeholder.active .panel-group-content {
        display: block !important;
    }

    .cc-virtual-tab.collapse-all .tab-placeholder--normal .panel-group-content {
        display: none;
    }

    .cc-virtual-tab.collapse-all .tab-placeholder .tab-plcacholder-info,
    .cc-virtual-tab.collapse-all .tab-placeholder .cc-virtual-panel-group {
        display: none;
    }

    .cc-virtual-tab .tab-placeholder__spec-panel {
    <#--  border-left: 5px solid #20a0ff  -->
    }

    .cc-virtual-tab .tab-placeholder__normal-panel {
    <#--  border-left: 5px solid transparent  -->
    }

    .cc-virtual-tab .tab-placeholder__panel-wrapper {
        display: flex;
        position: relative;
        padding: 0;
        border: 1px dashed #ccc;
    }

    .cc-virtual-tab .tab-placeholder__panel {
        width: 1080px;
        display: inline-block;
        overflow-x: auto;
    }

    .tab-placeholder__panel-title {
        line-height: 35px;
    }

    .tab-placeholder__panel-title {
        cursor: pointer;
        text-decoration: underline;
    }

    .cc-virtual-tab .tab-plcacholder-info {
        display: inline-block;
        width: 150px;
        height: auto;
        color: #000;
        padding: 5px;
        margin-right: 10px;
        line-height: 25px;
        vertical-align: top;
        box-sizing: border-box;
        background: #f3f3f3;
    }

    .cc-virtual-tab .tab-placeholder__panel-remove {
        position: absolute;
        top: 11px;
        right: 10px;
        color: #ccc;
        cursor: pointer;
    }

    .cc-virtual-tab .panel-status--waiting {
        color: red;
    }

    .cc-virtual-tab .tab-placeholder-info__link {
        cursor: pointer;
        text-decoration: underline;
        margin-bottom: 15px;
    }

    .cc-virtual-tab .tab-placeholder-info__link:last-child {
        margin-bottom: 0
    }

    .cc-virtual-tab .cc-virtual-pannel {
        width: 100%;
    }

    .cc-virtual-tab .cc-virtual-pannel__block {
        border: none;
    }

    .cc-virtual-tab .cc-virtual-pannel__block-title {
        color: #fff;
    }

    .cc-virtual-tab .panel-placeholder {
        height: 20px;
        width: 100%;
        line-height: 20px;
        color: #000;
        font-size: 10px;
        text-align: center;
        border: 1px dashed transparent;
        box-sizing: border-box;
    }

    .cc-virtual-tab .panel-placeholder.active {
        border-color: #ccc;
        background: #ccc;
    }

    .cc-virtual-tab .btn-crowd {
        position: absolute;
        top: 5px;
        right: 35px;
        border: 1px solid #ccc;
        padding: 5px 10px;
        font-size: 10px;
        cursor: pointer;
    }

    .cc-virtual-tab .btn-crowd--set {
    }

    .cc-virtual-tab .btn-crowd--disabled {
        color: #ccc;
        cursor: not-allowed;
    }

    .cc-virtual-tab .tab-placeholder--normal .panel-group-title {
        background: #ccc;
    }

    .cc-virtual-tab .tab-placeholder__panel-wrapper--dragging,
    .cc-virtual-tab .tab-placeholder--dragging {
        height: 30px;
        border: 1px dashed #000;
    }

    .cc-virtual-tab .tab-placeholder__panel-wrapper--dragging > *,
    .cc-virtual-tab .tab-placeholder--dragging .panel-group-title {
        display: none;
    }

    .cc-virtual-tab .panel-group-title {
        padding: 0 10px;
        background: #20a0ff;
        color: #fff;
        line-height: 40px;
    }

    .cc-virtual-tab .panel-group-title i {
        cursor: pointer;
    }

    .cc-virtual-tab .btn-show-all {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .cc-virtual-tab .btn-show-all a {
        cursor: pointer
    }

    .cc-virtual-tab .el-icon-arrow-up,
    .cc-virtual-tab .el-icon-arrow-down {
        margin-right: 10px;
    }

    .cc-virtual-tab .cc-virtual-pannel__block:hover .cc-virtual-pannel__block-remove {
        display: none;
    }

    /* width */
    .cc-virtual-tab .el-tab-pane::-webkit-scrollbar,
    .cc-virtual-tab .tab-placeholder__panel::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    /* Track */
    .cc-virtual-tab .el-tab-pane::-webkit-scrollbar-track,
    .cc-virtual-tab .tab-placeholder__panel::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .cc-virtual-tab .el-tab-pane::-webkit-scrollbar-thumb,
    .cc-virtual-tab .tab-placeholder__panel::-webkit-scrollbar-thumb {
        background: #888;
    }

    /* Handle on hover */
    .cc-virtual-tab .el-tab-pane::-webkit-scrollbar-thumb:hover,
    .cc-virtual-tab .tab-placeholder__panel::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .cc-virtual-tab .panel-duplicate {
        border: 1px solid red;
    }
</style>